import { useParams } from 'react-router-dom'
import { getDetail } from '../../api'
import { useEffect, useState } from 'react'
import { Button, Swiper, Popup, Stepper, Toast } from 'antd-mobile'
import { addShopCar } from '../../api'


interface infoType {
    img?: string[],
    id?: string,
    title?: string,
    price?: number,
    type?: number,
    number?: number
}

const Detail = () => {

    const [info, setInfo]: [infoType, any] = useState({})

    const [visible, setVisible] = useState(false)

    const { id } = useParams()

    useEffect(() => {
        getDetail({ id: id as string }).then(res => {
            setInfo(res.data)
        })
    }, [])


    const addCar = () => {
        addShopCar(info).then((res: any) => {
            Toast.show({
                content: res.msg
            })

            setVisible(!visible)
        })
    }

    return <div>
        <Swiper>
            {
                info.img?.map((item, idx) => {
                    return <Swiper.Item key={idx}>
                        <img style={{ width: "100%" }} src={item} alt="" />
                    </Swiper.Item>
                })
            }
        </Swiper>
        <h1>{info.title}</h1>
        <p>￥{info.price}</p>
        <Button onClick={() => setVisible(!visible)}>加入购物车</Button>
        <Button onClick={() => setVisible(!visible)}>立即购买</Button>

        {/* 底部弹出层 */}
        <Popup
            visible={visible} // 是否显示
            onMaskClick={() => {
                setVisible(!visible) // 取弹出状态相反值
            }}
            bodyStyle={{ minHeight: '40vh' }}
        >
            <img src={info.img && info.img[0]} alt="" />
            <h1>{info.title}</h1>
            <p>￥{info.price}</p>
            数量：
            <Stepper
                value={info.number} // 受控组件
                onChange={value => {
                    setInfo({
                        ...info,
                        number: value
                    })
                }}
            />
            <Button onClick={() => addCar()}>加入购物车</Button>
            <Button onClick={() => {
                Toast.show({
                    content: '下单功能还未git，敬请期待'
                })
            }}>立即购买</Button>
        </Popup>
    </div>
}

export default Detail